<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
	
	<!-- 引入 echarts.js -->
    <script src="${path}/static/common/echarts.min.js"></script>
     <script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
	 	// 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('main'));
	 	$.post(
	 		"${path}/category/getCategoryCount.action",
	 		function(result) {
	 			console.log(result);
	 			// List<CategoryCount> list;
	 			var list = result.data;
	 			// x轴数据，存放分类的名字
	 			// var xArray = new Array();
	 			var xArray = [];
	 			// y轴数据，存放分类的数量
	 			var yArray = new Array();
	 			for(var i = 0; i < list.length; i++) {
	 				// list[i] -- CategoryCount
	 				xArray.push(list[i].name);
	 				yArray.push(list[i].count);
	 			}
	 			
	 		    var option = {
	 		        title: {
	 		            text: 'ECharts 入门示例'
	 		        },
	 		        tooltip: {},
	 		        legend: {
	 		            data:['销量']
	 		        },
	 		        xAxis: {
	 		            data: xArray
	 		        },
	 		        yAxis: {},
	 		        series: [{
	 		            name: '销量',
	 		            type: 'bar',
	 		            //type: 'pie',
	 		            data: yArray
	 		        }]
	 		    };
	 		
	 		    // 使用刚指定的配置项和数据显示图表。
	 		    myChart.setOption(option);
	 		},
	 		"json"
	 	);
	   
	</script>
</body>
</html>